<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
        import { reactive,effect,ref,toRefs,computed } from './index.js'
    //reactive    
        // const obj = reactive({
        //     name:'syk',
        //     age:'28'
        // });
        // obj.name = 'werther';
        // delete obj.age;
        // console.log(obj)
    //effect
		// const prod = reactive({
		// 	name:'iphone 12pro',
		// 	num:10,
		// 	price:8499
		// });
		// let total = 0;
		// effect(()=>{
		// 	total = prod.price * prod.num
		// })
		// console.log(total);
		// prod.price = 10;
		// console.log(total);
		// prod.num = 1;
        // console.log(total);
    //ref
        // const price = ref(8499);
        // const num = ref(10);
		// let total = 0;
		// effect(()=>{
		// 	total = price.value * num.value
		// })
		// console.log(total);
		// price.value = 10;
		// console.log(total);
		// num.value = 1;
        // console.log(total);
    //toRefs   
        // function useProd(){
        //     const prod = reactive({
        //     	name:'iphone 12pro',
        //     	num:10,
        //     	price:8499
        //     });
        //     return toRefs(prod)
        // }
        // const { price,num } = useProd();
        // let total = 0;
		// effect(()=>{
		// 	total = price.value * num.value
		// })
		// console.log(total);
		// price.value = 10;
		// console.log(total);
		// num.value = 1;
        // console.log(total);
    //computed
        // const prod = reactive({
		// 	name:'iphone 12pro',
		// 	num:10,
		// 	price:8499
		// });
        // let total = computed(()=>{
        //     return prod.price * prod.num
        // });
		// console.log(total.value);
		// prod.price = 10;
		// console.log(total.value);
		// prod.num = 1;
        // console.log(total.value);
    </script>
</body>
</html>